<template>
    <a-layout-content style="padding: 0 14px; margin: 50px 0">
        <a-layout style="padding: 14px 0; background: #fff">
            <a-layout-content :style="{ padding: '0 24px', minHeight: '880px' }">

                <h2 v-if="level1.length == 0">对不起，找不到相关文档</h2>
                <a-row :gutter="24">
                    <a-col :span="4" >
                        <a-tree
                                v-if="level1.length>0"
                                :replaceFields="{children:'children', title:'name', key:'id', value: 'id' }"
                                :tree-data="level1"
                                :defaultExpandAll="true"
                                @select="onSelect"
                                :defaultSelectedKeys="defaultSelectedKeys"
                        >

                        </a-tree>
                    </a-col>
                    <a-col :span="20">
                            <div>
                                <h2>{{doc.name}}</h2>
                                <div>
                                    <span>阅读数：{{doc.viewCount}}</span> &nbsp; &nbsp;
                                    <span>点赞数：{{doc.voteCount}}</span>
                                </div>
                                <a-divider style="height: 2px; background-color: #9999cc"/>
                            </div>
                            <div  class="m_wangeditor" :innerHTML="html"></div>
                            <div style="text-align: center;padding: 15px">
                                <a-button type="primary" shape="round" :size="'large'" @click="vote">
                                    <template #icon><LikeOutlined /> &nbsp;点赞：{{doc.voteCount}} </template>
                                </a-button>
                            </div>
                    </a-col>
                </a-row>

            </a-layout-content>
        </a-layout>
    </a-layout-content>


</template>

<script lang="ts">

    import {defineComponent, onMounted, ref} from 'vue';
    import axios from 'axios';
    import {message, Modal} from 'ant-design-vue';
    import {Tool} from "@/util/tool";
    import {useRoute} from "vue-router";

    export default defineComponent({
        name: 'Doc',
        setup: function () { //入口
            console.log("setup");
            const route = useRoute();

            const level1 = ref();
            level1.value = []

            //当前选中doc
            const doc = ref();
            doc.value = {}


            const html = ref();
            const defaultSelectedKeys =ref();
            defaultSelectedKeys.value = [];

            /**
             * 数据查询
             **/
            const handleQuery = () => {
                axios.get("/doc/all/"+route.query.ebookId).then((response) => {
                    const data = response.data;
                    if (data.success) {
                        var  docs = data.content; //
                        level1.value = [];
                        level1.value = Tool.array2Tree(docs, 0)

                        if (Tool.isNotEmpty(level1.value)) {
                            defaultSelectedKeys.value = [level1.value[0].id];
                            handleContent(level1.value[0].id);
                            // 初始显示文档信息
                            doc.value = level1.value[0]
                        }

                    } else {
                        message.error(data.message);
                    }
                });
            };

            /**
             * 查询文档内容
             **/
            const handleContent = (docId:number) => {
                axios.get("/doc/find_content/"+docId).then((response) => {
                    const data = response.data;
                    if (data.success) {
                       html.value=data.content==null ? '' : data.content.content
                    } else {
                        message.error(data.message);
                    }
                });
            };

            // 点赞
            const vote = () => {
                //
                axios.get('/doc/vote/' + doc.value.id).then((response) => {
                    const data = response.data;
                    if (data.success) {
                        doc.value.voteCount++;
                    } else {
                        message.error(data.message);
                    }
                });
            };


            const onSelect = (selectedKeys:any ,info :any) => {
                console.log(selectedKeys)
                if(Tool.isNotEmpty(selectedKeys)){
                    doc.value = info.selectedNodes[0].props
                    handleContent(selectedKeys[0])
                }
            };

            onMounted(() => {
                handleQuery();
            });

            return {
                level1,
                onSelect,
                html,
                defaultSelectedKeys,
                doc,
                vote
            };
        },
    });
</script>
<!--scoped 只在当前页面生效
wangeditor
从编辑器中获取的 html 代码是不包含任何样式的纯 html，
如果显示的时候需要对其中的 <table> <code> <blockquote> 等标签进行自定义样式（这样既可实现多皮肤功能），
下面提供了编辑器中使用的样式供参考
-->
<style scoped>
    /* table 样式 */
    .m_wangeditor >>> table {
        border-top: 1px solid #ccc;
        border-left: 1px solid #ccc;
    }
    .m_wangeditor >>> table td,
    .m_wangeditor >>> table th {
        border-bottom: 1px solid #ccc;
        border-right: 1px solid #ccc;
        padding: 3px 5px;
    }
    .m_wangeditor >>> table th {
        border-bottom: 2px solid #ccc;
        text-align: center;
    }

    /* blockquote 样式 */
    .m_wangeditor >>> blockquote {
        display: block;
        border-left: 8px solid #d0e5f2;
        padding: 5px 10px;
        margin: 10px 0;
        line-height: 1.4;
        font-size: 100%;
        background-color: #f1f1f1;
    }

    /* code 样式 */
    .m_wangeditor >>> code {
        display: inline-block;
        *display: inline;
        *zoom: 1;
        background-color: #f1f1f1;
        border-radius: 3px;
        padding: 3px 5px;
        margin: 0 3px;
    }
    .m_wangeditor >>> pre code {
        display: block;
    }

    /* ul ol 样式 */
    .m_wangeditor >>> ul,  .m_wangeditor  >>>ol {
        margin: 10px 0 10px 20px;
    }
</style>
